<!--介绍-->
<template>
  <div class="movie_introduce">
    <el-image-viewer
      v-if="showViewer"
      :on-close="showViewerClose"
      :url-list="srcList"
    ></el-image-viewer>
    <div class="capture" @click="getPreview">
      <img :src="srcList[0]" />
      <div class="sub_cont">图集【100张】</div>
    </div>
    <div class="introduce_cont">
      <div class="title_box">
        <span class="lt_tag">法国</span>
        <h5 class="tt">八两金</h5>
        <span class="bt">(别名：九两金)</span>
      </div>
      <div class="sub_title">
        <el-rate
          v-model="value"
          disabled
          show-score
          :max="10"
          text-color="#ff9900"
          score-template="{value}"
        >
        </el-rate>
      </div>

      <ul class="list">
        <li>
          <span>演员：</span>
          <span>金宝</span>
        </li>
        <li>
          <div class="lt">
            <span>类型：</span>
            <span>剧情</span>
          </div>
          <div class="rt">
            <span>导演：</span>
            <span>老张</span>
          </div>
        </li>
        <li>
          <div class="lt">
            <span>上映日期：</span>
            <span>2020-02-02</span>
          </div>
          <div class="rt">
            <span>片长：</span>
            <span>120 min</span>
          </div>
        </li>
        <li>
          <span>剧情介绍：</span>
          <span
            >普德是阿姆丽塔的故事，当她的丈夫在聚会上打她一次时，她看似完美的生活被粉碎了。但是，一记耳光足以质疑一段关系代表什么吗？</span
          >
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import ElImageViewer from "element-ui/packages/image/src/image-viewer";
import p1 from "@/assets/image/banner/1.jpg";
import p2 from "@/assets/image/banner/2.jpg";

export default {
  components: {
    ElImageViewer,
  },
  data() {
    return {
      value: 8.5,
      showViewer: false,
      srcList: [p1, p2],
    };
  },
  methods: {
    showViewerClose() {
      this.showViewer = false;
    },
    getPreview() {
      this.srcList
        ? (this.showViewer = true)
        : this.$message.info("当前没有可预览的图片");
    },
  },
};
</script>
<style lang="scss" scoped>
.movie_introduce {
  background-color: #fff;
  padding: 10px;
  min-height: 300px;
  .capture {
    width: 180px;
    height: 220px;
    float: left;
    img {
      width: 100%;
      height: 220px;
      object-fit: cover;
    }
    .sub_cont {
      text-align: center;
      font-size: 14px;
      padding: 8px;
      color: $primary_clr;
      user-select: none;
      cursor: pointer;
    }
  }
  .introduce_cont {
    padding-left: 200px;
    .title_box {
      .tt {
        font-size: 20px;
        color: #111;
        font-weight: 600;
        display: inline-block;
      }
      .bt {
        font-size: 14px;
        color: #666;
      }
    }
    .sub_title {
      margin: 8px 0;
    }
    .list {
      span {
        &:first-child {
          color: #666;
          font-size: 13px;
          letter-spacing: 1px;
        }
        &:last-child {
          color: #111;
          font-size: 14px;
        }
      }
      li {
        line-height: 22px;
        vertical-align: middle;
        .lt {
          width: 40%;
          display: inline-block;
        }
        .rt {
          width: 40%;
          display: inline-block;
        }
      }
    }
  }
}
</style>